﻿<!DOCTYPE html>
<html lang="en">
<head>
    <#--<meta http-equiv="content-type" content="text/html;charset=UTF-8">-->
    <#--<meta name="viewport" content="width=device-width, initial-scale=1.0" />-->

    <title>阅卷</title>

    <link href="/qd/css/main.css" rel="stylesheet">
    <link href="/qd/css/iconfont.css" rel="stylesheet">
    <link href="/qd/css/test.css" rel="stylesheet">

    <script src="/qd/jq/jquery-1.11.3.min.js"></script>
    <script src="/qd/jq/jquery.easy-pie-chart.js"></script>
    <!--时间js-->
    <script src="/qd/jq/jquery.countdown.js"></script>

    <script type="text/javascript" src="/qd/jq/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/qd/jq/jquery.easy-pie-chart.js"></script>
    <script type="text/javascript" src="/qd/jq/jquery.countdown.js"></script>
        <#--<script type="text/javascript" src="/qd/jq/bootstrap.min.js"></script>-->
    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }

        .reading h2 {
            width: 100%;
            margin: 20px 0 70px;
            text-align: center;
            line-height: 2;
            font-size: 20px;
            color: #59595b;
        }

            .reading h2 a {
                text-decoration: none;
                color: #59595b;
                font-size: 20px;
            }

                .reading h2 a:hover {
                    color: #2183f1;
                }

    </style>



    <script>
        window.jQuery(function ($) {
            "use strict";

            $('time').countDown({
                with_separators: false
            });
            $('.alt-1').countDown({
                css_class: 'countdown-alt-1'                            /*设置时间的倒计时*/
            });
            $('.alt-2').countDown({
                css_class: 'countdown-alt-2'
            });

        });


        $(function () {
            $('textarea.1').click(function () {                /*当你点击一个答案*/
                debugger;
                var examId = $(this).closest('.test_content_nr_tt').closest('li').attr('id');          // 得到题目ID，得到最靠近的'.test_content_nr_main'后，再得到最靠近的li的id属性的值
                var cardLi = $('a[href=#' + examId + ']');          // 根据题目ID找到对应答题卡，a标签的href属性是#XXXX的
                // 设置已答题
                if (!cardLi.hasClass('hasBeenAnswer')) {                    /*如果题目被选过了，找到的答题卡就变色*/
                    cardLi.addClass('hasBeenAnswer');
                }

            });
        });

        $(function () {
            $("input[value='取消标记']").click(function () {                /*取消标记按钮*/

                debugger;
                var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id');          // 得到题目ID，得到最靠近的'.test_content_nr_main'后，再得到最靠近的li的id属性的值
                var cardLi = $('a[href=#' + examId + ']');          // 根据题目ID找到对应答题卡，a标签的href属性是#XXXX的
                // 设置已答题
                if (cardLi.hasClass('hasBeenAnswer')) {                    /*如果题目被选过了，找到的答题卡就变色*/
                    cardLi.removeClass("hasBeenAnswer");            //去除这个class
                }

            });
        });

//
//        $(function () {
//            $("#test_jiaojuan").click(function () {                /*当你点击交卷*/
//
//
//            });
//        });

        function ret(){
            if(confirm("您确认交卷吗？")) {
                return true;
            };
            return false;
        }
    </script>

    <script>  //根据textarea 标签内容自适应高度
    window.onload = function() {                        //页面加载完后调用
        $.each($("textarea"), function (i, n) {
            $(n).css("height", n.scrollHeight + "px");
        })
    }
    </script>
</head>

<body>








    <div class="main">



        <!--nr start-->
        <div class="test_main">
            <div class="nr_left">
                <div class="test">

                    <form action="/student/addScore" method="post" onsubmit="return ret()">

                        <input name="id" value="${answer.studentId}" type="hidden">
                        <input name="studentOrTeacher" value="0" type="hidden">
                <div class="test_content_nr">
                    <ul>



                        <#list studentList as stu> <#--遍历stuList-->




                                <div class="test_content">
                                    <div class="test_content_title">
                                        <h2>${stu.type}</h2>                                                                <#--题型-->
                                        <p>
                                            </span><span>合计</span><i class="content_fs">${stu.score}</i><span>分</span>             <#--几道题，合计共多少分-->
                                        </p>
                                    </div>
                                </div>



                            <li id="${stu.type}">
                                <div class="test_content_nr_tt">
                                    <i>${stu.type}</i><span>(${stu.score}分)-----正确答案</span><textarea readonly wrap="hard" cols="100" rows=1 style="border:0px">${stu.answer}</textarea><b class="icon iconfont"></b>                <#--第一道题-->
                                </div>

                                <div class="test_content_nr_tt">
                                    <span>学生的答案</span><textarea readonly wrap="hard" cols="100" rows=1 style="border:0px;color: #389fc3;"><#if stu.type=="作文">${answer.writing}<#elseif stu.type=="听A">${answer.listeningA}<#elseif stu.type=="听B">${answer.listeningB}<#elseif stu.type=="听C">${answer.listeningC}<#elseif stu.type=="选词">${answer.gapFilling}<#elseif stu.type=="匹配">${answer.informationMatching}<#elseif stu.type=="阅A">${answer.readingA}<#elseif stu.type=="阅B">${answer.readingB}<#elseif stu.type=="翻译">${answer.translation}</#if></textarea><b class="icon iconfont"></b>                <#--第一道题-->
                                </div>



                            </li>



                        </#list>



                    </ul>
                </div>












                        <div class="test_title">
                            <p class="test_time">
                                <i class="icon iconfont">&#xe6fb;</i><b class="alt-1">成绩</b>             <#--交卷旁边的倒计时-->
                            </p>
                            <input type="text" name="note" id="cj" align="center" value="${score}">
                            <font><input type="submit" name="test_jiaojuan" id="test_jiaojuan" value="提交"></font>                  <#--交卷按钮-->
                        </div>


                    </form>
                </div>

            </div>





            <div class="nr_right">
                <div class="nr_rt_main">
                    <div class="rt_nr1">


                        <div class="rt_nr1_title">
                            <h1>
                                <i class="icon iconfont">&#xe692;</i>答题卡                        <#--答题卡-->
                            </h1>
                            <#--<p class="test_time">-->
                                <#--<i class="icon iconfont">&#xe6fb;</i><b class="alt-1">02:05</b>                 &lt;#&ndash;右上角的倒计时&ndash;&gt;-->
                            <#--</p>-->
                        </div>



                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>单选题</h2>                                                            <#--答题卡上的单选跳转按钮-->
                                <p>
                                    <span>共</span><i class="content_lit">9</i><span>题</span>
                                </p>
                            </div>
                                <div class="rt_content_nr answerSheet">
                                <ul>


                                    <#list studentList as stu> <#--遍历stuList-->
                                        <li><a href="#${stu.type}">${stu.type}</a></li>             <#--直接跳到试卷-->
                                    </#list >
                                </ul>
                            </div>
                        </div>



                    </div>

                </div>
            </div>
        </div>
        <!--nr end-->


        <div class="foot"></div>

       
    </div>








</body>

</html>


